import React from 'react';
import { Link } from 'react-router-dom';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react';
import { Breadcrumb } from '@casstime/bricks';

import Page from '../../../components/Page';
import HomePageStore from '../stores/HomePageStore';
import { RouteConfigComponentProps } from 'react-router-config';
import { IMenu } from '../../../interfaces/IMenu';

interface IHomePageProps extends RouteConfigComponentProps<void> {
  homePageStore: HomePageStore
  userStore?: any;
  menuStore?: any;
}

@inject('userStore')
@inject('menuStore')
@observer
class Main extends React.Component<IHomePageProps, {}> {

  render() {
    const { menuStore } = this.props;

    let activeMenuName = '';

    let activeMenuUrl = '';

    let parentMenuName = '';

    const activeMenuId = menuStore.activeMenuId;

    menuStore.menus.forEach((item: IMenu) => {
      let firstMenuName = item.menuName;
      if (item.subMenu) {
        item.subMenu.forEach((menuItem: IMenu) => {
          if (menuItem.menuId === activeMenuId) {
            activeMenuUrl = menuItem.menuUrl || '';
            activeMenuName = menuItem.menuName || '';
            parentMenuName = firstMenuName || '';
          }
        })
      }
    })

    return (
      <Page title="主页">
        <header>
          <Breadcrumb description={activeMenuName} icon='car'>
            <Breadcrumb.Item>管理中心</Breadcrumb.Item>
            <Breadcrumb.Item>{parentMenuName}</Breadcrumb.Item>
            <Breadcrumb.Item>{activeMenuName}</Breadcrumb.Item>
          </Breadcrumb>
        </header>
        <section>
          <iframe src={activeMenuUrl} scrolling='yes'></iframe>
        </section>
      </Page>
    );
  }
}

export default Main;
